<template>
  <div class="container">
    <div class="allNum">
      <div>
        <p>
          <span class="num_ico" style="border-color: #F0BBFF"></span>
          <span>总功耗</span>
        </p>
        <p class="num_txt">1100</p>
      </div>
      <div>
        <p>
          <span class="num_ico" style="border-color: #00FF33"></span>
          <span>总热耗</span>
        </p>
        <p class="num_txt">2200</p>
      </div>
    </div>
    <div id="myChart"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));

      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "00:00",
              "03:00",
              "06:00",
              "09:00",
              "12:00",
              "15:00",
              "18:00",
              "21:00",
              "24:00"
            ]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "热耗",
            type: "line",
            data: [50, 65, 80, 100, 90, 80, 70, 60, 100],
            markPoint: {
              data: [{ type: "max", name: "最大值" }]
            },
            itemStyle: {
              normal: { areaStyle: { type: "default" }, color: "#00FF33" }
            }
          },
          {
            name: "功耗",
            type: "line",
            data: [80, 140, 200, 230, 250, 230, 175, 180, 180],
            markPoint: {
              data: [{ type: "max", name: "最大值" }]
            },
            itemStyle: {
              normal: { areaStyle: { type: "default" }, color: "#F0BBFF" }
            }
          }
        ]
      });
    }
  },
  mounted() {
    this.drawLine();
  }
};
</script>
<style lang="scss" scoped>
.container{
  overflow: auto;
}
#myChart{
  width:350px;
  margin: 0 auto;
  height: 300px;
}
.allNum > div {
  //总数据
  display: inline-block;
  width: 45%;
  span {
    font-size: 0.12rem;
  }
  .num_ico {
    position: relative;
    top: -0.04rem;
    display: inline-block;
    width: 0.12rem;
    border-bottom: 2px solid;
    margin-right: 0.06rem;
  }
  .num_txt {
    font-family: "Microsoft YaHei";
    font-size: 0.26rem;
    color: black;
    font-weight: 600;
  }
}
.his_waring {
  //历史报警
  padding: 0 0.1rem;
  .waring_title {
    display: flex;
    justify-content: space-between;
    // vertical-align: bottom;
    .p_title {
      font-size: 0.16rem;
      color: black;
      font-weight: 600;
    }
  }
  ul {
    list-style: none;
    padding: 0;
    li {
      width: 100%;
      background: #7f8fc3;
      border-radius: 0.1rem;
      margin: 0.05rem 0;
      padding: 0.1rem 0.2rem;
      color: #ffffff;
      font-size: 0.14rem;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>